<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>评论</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style>
			ul {
				padding: 0rem;
				margin: 0rem;
				width: 58.25rem;
			}

			li {
				padding: 0rem;
				margin: 0rem;
				width: 58.25rem;
			}
		</style>
	</head>
	<body>
		<div style="width: 58.25rem;height: auto;border: 0.0625rem solid #F1F1F1;" class="divColumn" id="comment">
			<div style="width: 100%;height: 2.625rem;" class="divRow divColumnCenter">
				<div class="divRow divColumnCenter" style="margin-left: 2.5rem;cursor: pointer;" v-for="(item,index) in comType"
				 @click="typeExh(index)">
					<img :src="item.icon" />
					<span style="margin-left: 0.625rem;" v-html="item.title"></span>
				</div>
			</div>
			<div style="width: 58.25rem;height: 0.0625rem;background: #F1F1F1;"></div>
			<div style="width:58.25rem;height: auto;" class="divColumn">
				<ul>
					<li v-for="(item,index) in comList">
						<div style="width:58.25rem;height: 10rem;" class="divRow divColumnCenter">
							<div style="width: 14%;height: 100%;" class="divColumn divCenter">
								<div>
									<img src="https://img13.360buyimg.com/n7/jfs/t1/51361/13/9678/175659/5d7116ccE5f251736/8c35fadc669d48b2.jpg"
									 style="width: 5rem;height: 5rem;" />
								</div>
								<span>马******8</span>
							</div>

							<div style="width: 86%;height: 100%;" class="divColumn">
								<p style="margin-top: 0.625rem;">机型很高大尚。 拍照效果：拍照很清晰。 显示效果：色彩饱满。 电池续航：续航还满好的。 运行速度：运行速度很快。通信音质：音量大，很清楚。</p>
								<div class="divRow divColumnCenter">
									<img src="https://img13.360buyimg.com/n7/jfs/t23104/127/1780252499/511233/732c04ea/5b6912bdN5ffe0b0b.jpg"
									 style="width: 3.75rem;height: 3.75rem;margin-right: 0.625rem;" />
									<img src="https://img13.360buyimg.com/n7/jfs/t23104/127/1780252499/511233/732c04ea/5b6912bdN5ffe0b0b.jpg"
									 style="width: 3.75rem;height: 3.75rem;margin-right: 0.625rem;" />
									<img src="https://img13.360buyimg.com/n7/jfs/t23104/127/1780252499/511233/732c04ea/5b6912bdN5ffe0b0b.jpg"
									 style="width: 3.75rem;height: 3.75rem;margin-right: 0.625rem;" />
								</div>
								<div style="width: 98%;text-align: end;">2019年06月27日 18:13</div>
							</div>
						</div>
						<div style="width: 100%;height: 0.0625rem;background: #F0F0F0;" v-if="index!=(comList.length-1)"></div>
					</li>

				</ul>







			</div>



		</div>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script>
			var comment = new Vue({
				el: '#comment',
				data: {
					comList: ['', '', '', '', '', ''],
					comType: [{
							title: '全部',
							icon: 'img/dot_ch.png'
						},
						{
							title: '图片',
							icon: 'img/dot_un.png'
						},
						{
							title: '好评',
							icon: 'img/dot_un.png'
						},
						{
							title: '中评',
							icon: 'img/dot_un.png'
						},
						{
							title: '差评',
							icon: 'img/dot_un.png'
						}

					]


				},
				methods: {
					typeExh: function(index) {
						for (var i = 0; i < comment.comType.length; i++) {
							if (index == i) {
								comment.comType[i].icon = 'img/dot_ch.png';
							} else {
								comment.comType[i].icon = 'img/dot_un.png';
							}

						}






					}

				}
			})
		</script>

	</body>
</html>
